<template>
  <div>
    <div style="padding: 20px">
      <el-button
        type="primary"
        icon="el-icon-download"
        @click="dialogFormVisible = true"
        >导入excel</el-button
      >
      <el-button type="primary" icon="el-icon-upload" @click="handleExportDicts"
        >导出excel</el-button
      >
    </div>
    <div style="padding: 20px">
      <el-table
        :data="dicts"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="dictCode" label="编码"> </el-table-column>
        <el-table-column prop="value" label="值"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 上传对话框：
            点击导入excel按钮，弹出对话框，对话框中提供了上传组件可以选择文件上传
    -->
    <el-dialog title="导入数据字典" :visible.sync="dialogFormVisible">
      <el-upload
        class="upload-demo"
        ref="upload"
        :action="uploadPath"
        :auto-upload="false"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
        name="excel"
        :limit="1"
        :on-exceed="handleExceed"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >上传到服务器</el-button
        >
        <div slot="tip" class="el-upload__tip">只能上传Excel数据字典文件</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dictApi from "@/api/dict";
export default {
  data() {
    return {
      uploadPath: "http://192.168.1.170/admin/core/dict/import",
      dialogFormVisible: false,
      pid: 1,
      dicts: [],
    };
  },
  created() {
    this.loadDictByPid();
  },
  methods: {
    /*
      页面发起异步请求：
        1、调用了api/dict.js中的方法发起异步请求
        2、dict.js又通过utils/request.js 的axios 发起异步请求
        3、后端接收并处理了请求：
            因为后端服务使用了全局异常处理器，所以是否有异常都返回状态码为200的响应报文
        4、request.js 的axios配置了响应拦截器 
          当后端响应结果返回时：
            4.1 如果响应报文状态码不是200，通过error处理异常
            4.2 如果状态码时200，通过response处理成功的响应
              1、再判断如果响应体的R对象code值不等于0，弹出R对象的message属性值提示  拦截响应
              2、如果R对象的code值为0，放行响应到异步请求的代码   
    */
    handleDelete(index, row) {
      console.log(row);
      //如果一个节点没有下一级数据  可以提交删除请求删除当前的数据字典
      dictApi.delById(row.id).then((r) => {
        this.$message.success("删除成功");
        // this.loadDictByPid();
        // this.$router.push("/dict/list");
        window.location.reload();
      });
    },
    //表格绑定的懒加载函数
    load(tree, treeNode, resolve) {
      // console.log(tree); tree代表被点击行的json对象(dict)
      //查询被点击的行的下一级的数据 使用resolve解析展示到页面中
      dictApi.getByPid(tree.id).then((r) => {
        // console.log(r);
        resolve(r.data.items);
      });
    },
    //根据pid加载数据字典
    loadDictByPid() {
      dictApi.getByPid(this.pid).then((r) => {
        // console.log(r);
        this.dicts = r.data.items;
      });
    },

    //导出excel按钮事件
    handleExportDicts() {
      //修改地址栏地址为http://192.168.1.170/admin/dict/export，浏览器触发访问就可以下载文件
      window.location = "http://192.168.1.170/admin/dict/export";
    },
    //上传按钮单击事件
    submitUpload() {
      //触发上传组件 上传选择的文件
      //获取上传组件对象调用它的submit()就可以上传
      //this.$refs.upload  vue页面中可以通过$refs获取到所有的定义了ref属性的标签，根据ref值可以从该组标签中获取指定标签
      this.$refs.upload.submit();
    },
    //选择上传的文件个数超过limit限制时的回调
    handleExceed() {
      console.log("文件超出limit限制的个数");
    },
    //文件上传失败的回调:后端响应报文状态码不是200时回调
    handleUploadError(err, file, fileList) {
      console.log("文件上传失败:", err);
      this.$message.error("网络异常");
    },
    //文件上传成功的回调:如果后端响应报文状态码为200，成功的回调会被调用
    handleUploadSuccess(response, file, fileList) {
      //还需要判断response对象的code值是否为0(业务成功)
      if (response.code === 0) {
        // console.log("文件上传成功:", response);
        this.$message.success("数据字典导入成功");
        //清除已上传成功的文件列表
        this.$refs.upload.clearFiles();
        //关闭对话框
        this.dialogFormVisible = false;
      } else {
        this.$message.warning(response.message);
        //清除已上传成功的文件列表
        this.$refs.upload.clearFiles();
        //关闭对话框
        this.dialogFormVisible = false;
      }
    },
  },
};
</script>
